<template>
  <div class="select">
    <van-tree-select
      height="140vw"
      :items="items"
      :main-active-index.sync="active"
      class="left"
    >
      <template #content>
        <div v-if="active === 0" class="one">
          <p class="big">热门分类</p>
          <div v-for="(v, index) in list1" :key="index">
            <img :src="v.src" alt="" />
            <p>{{ v.info }}</p>
          </div>
        </div>
        <div v-if="active === 1" class="one">
          <p class="big">热门分类</p>
          <div v-for="(v, index) in list2" :key="index">
            <img :src="v.src" alt="" />
            <p>{{ v.info }}</p>
          </div>
        </div>
        <div v-if="active === 2" class="one">
          <p class="big">热门分类</p>
          <div v-for="(v, index) in list1" :key="index">
            <img :src="v.src" alt="" />
            <p>{{ v.info }}</p>
          </div>
        </div>

        <div v-if="active === 3" class="one">
          <p class="big">热门分类</p>
          <div v-for="(v, index) in list2" :key="index">
            <img :src="v.src" alt="" />
            <p>{{ v.info }}</p>
          </div>
        </div>
        <div v-if="active === 4" class="one">
          <p class="big">热门分类</p>
          <div v-for="(v, index) in list1" :key="index">
            <img :src="v.src" alt="" />
            <p>{{ v.info }}</p>
          </div>
        </div>
        <div v-if="active === 5" class="one">
          <p class="big">热门分类</p>
          <div v-for="(v, index) in list2" :key="index">
            <img :src="v.src" alt="" />
            <p>{{ v.info }}</p>
          </div>
        </div>
        <div v-if="active === 6" class="one">
          <p class="big">热门分类</p>
          <div v-for="(v, index) in list1" :key="index">
            <img :src="v.src" alt="" />
            <p>{{ v.info }}</p>
          </div>
        </div>

        <div v-if="active === 7" class="one">
          <p class="big">热门分类</p>
          <div v-for="(v, index) in list2" :key="index">
            <img :src="v.src" alt="" />
            <p>{{ v.info }}</p>
          </div>
        </div>
        <div v-if="active === 8" class="one">
          <p class="big">热门分类</p>
          <div v-for="(v, index) in list1" :key="index">
            <img :src="v.src" alt="" />
            <p>{{ v.info }}</p>
          </div>
        </div>
        <div v-if="active === 9" class="one">
          <p class="big">热门分类</p>
          <div v-for="(v, index) in list2" :key="index">
            <img :src="v.src" alt="" />
            <p>{{ v.info }}</p>
          </div>
        </div>
        <div v-if="active === 10" class="one">
          <p class="big">热门分类</p>
          <div v-for="(v, index) in list1" :key="index">
            <img :src="v.src" alt="" />
            <p>{{ v.info }}</p>
          </div>
        </div>

        <div v-if="active === 11" class="one">
          <p class="big">热门分类</p>
          <div v-for="(v, index) in list2" :key="index">
            <img :src="v.src" alt="" />
            <p>{{ v.info }}</p>
          </div>
        </div>
        <div v-if="active === 12" class="one">
          <p class="big">热门分类</p>
          <div v-for="(v, index) in list1" :key="index">
            <img :src="v.src" alt="" />
            <p>{{ v.info }}</p>
          </div>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      items: [
        { text: "热门推荐" },
        { text: "手机数码" },
        { text: "京东超市" },
        { text: "家用电器" },
        { text: "电脑办公" },
        { text: "电脑办公" },
        { text: "玩具乐器" },
        { text: "家居厨具" },
        { text: "家具家装" },
        { text: "男装" },
        { text: "男鞋" },
        { text: "女装" },
        { text: "女鞋" },
        { text: "健康" },
        { text: "运动" },
        { text: "母婴" },
      ],
      list1: [
        {
          src: "https://img30.360buyimg.com/focus/s140x140_jfs/t11431/77/1274462175/4200/a52ec5cc/59ffd6e2N287c043d.jpg",
          info: "京东超市",
        },
        {
          src: "https://img20.360buyimg.com/focus/s140x140_jfs/t11461/336/1331406760/15773/60c49ab7/59ffd6d0Ncb29412d.png",
          info: "数码电器",
        },
        {
          src: "https://img12.360buyimg.com/focus/s140x140_jfs/t11890/195/1248876103/12648/403ce46a/59ffd6b9Nc88344b5.png",
          info: "京东新百货",
        },
        {
          src: "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png",
          info: "京东生鲜",
        },
        {
          src: "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png",
          info: "京东到家",
        },
        {
          src: "https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png",
          info: "充值缴费",
        },
        {
          src: "https://img30.360buyimg.com/focus/s140x140_jfs/t11431/77/1274462175/4200/a52ec5cc/59ffd6e2N287c043d.jpg",
          info: "京东超市",
        },
        {
          src: "https://img20.360buyimg.com/focus/s140x140_jfs/t11461/336/1331406760/15773/60c49ab7/59ffd6d0Ncb29412d.png",
          info: "数码电器",
        },
        {
          src: "https://img12.360buyimg.com/focus/s140x140_jfs/t11890/195/1248876103/12648/403ce46a/59ffd6b9Nc88344b5.png",
          info: "京东新百货",
        },
        {
          src: "https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png",
          info: "京东国际",
        },
      ],
      list2: [
        {
          src: "https://img20.360buyimg.com/focus/s140x140_jfs/t11461/336/1331406760/15773/60c49ab7/59ffd6d0Ncb29412d.png",
          info: "数码电器",
        },
        {
          src: "https://img12.360buyimg.com/focus/s140x140_jfs/t11890/195/1248876103/12648/403ce46a/59ffd6b9Nc88344b5.png",
          info: "京东新百货",
        },
        {
          src: "https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png",
          info: "京东国际",
        },
        {
          src: "https://img30.360buyimg.com/focus/s140x140_jfs/t11431/77/1274462175/4200/a52ec5cc/59ffd6e2N287c043d.jpg",
          info: "京东超市",
        },
        {
          src: "https://img20.360buyimg.com/focus/s140x140_jfs/t11461/336/1331406760/15773/60c49ab7/59ffd6d0Ncb29412d.png",
          info: "数码电器",
        },
        {
          src: "https://img12.360buyimg.com/focus/s140x140_jfs/t11890/195/1248876103/12648/403ce46a/59ffd6b9Nc88344b5.png",
          info: "京东新百货",
        },
        {
          src: "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png",
          info: "京东生鲜",
        },
        {
          src: "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png",
          info: "京东到家",
        },
        {
          src: "https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png",
          info: "充值缴费",
        },
        {
          src: "https://img30.360buyimg.com/focus/s140x140_jfs/t11431/77/1274462175/4200/a52ec5cc/59ffd6e2N287c043d.jpg",
          info: "京东超市",
        },
      ],
    };
  },
};
</script>

<style scoped>
.select{
  text-align: center;
}
img {
  width: 70px;
  height: 70px;
  margin: 5px;
}
.one {
  width: 275px;
  display: flex;
  flex-wrap: wrap;
}
.big {
  width: 275px;
  font-weight: bold;
  font-size: 20px;
}
</style>